<template>
  <div class="shop">
    <!-- 上面部分 -->
    <div class="merchant">
      <div class="topCotent df jcsb">
        <div class="df fdc">
          <h2 class="shopName">{{ shopData.name }}</h2>
          <!-- 评分 -->
          <div class="df aic">
            <van-rate
              v-model="value"
              :size="18"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            月售{{ shopData.userid }}单
          </div>
        </div>
        <div class="df jcc fdc aic">
          <van-icon size="20px" color="#ff3300" name="like" />
          <span class="handRub">已收藏</span>
        </div>
      </div>
      <van-divider />
      <!-- 下面文字部分 -->
      <div class="bottomText df jcsb">
        <div class="df aic fdc jcc">
          <span>起送价</span>
          <span>
            <span class="priceData">{{ shopData.minPrice }}</span>
            元
          </span>
        </div>
        <div class="df aic fdc jcc">
          <span>商家配送</span>
          <span>
            <span class="priceData">{{ shopData.deliveryPrice }}</span>
            元
          </span>
        </div>
        <div class="df aic fdc jcc">
          <span>评价配送时间</span>
          <span>
            <span class="priceData">{{ shopData.deliveryTime }}</span>
            分钟
          </span>
        </div>
      </div>
    </div>

    <!-- 下面的内容 -->
    <div class="announcement">
      <h2>活动与公告</h2>
      <p class="bulletin">{{ shopData.bulletin }}</p>
      <van-divider />
      <div class="supports" v-for="item in shopData.supports" :key="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      value: 5,
    }
  },
  methods: {},
  computed: {
    ...mapState('shop', ['shopData']),
  },
  created() {
    //初始化发请求
  },
}
</script>

<style lang="scss" scoped>
.shop {
  height: 100%;
  background: #f6f6f6;
  .merchant {
    min-height: 240px;
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;

    .topCotent {
      margin-bottom: 20px;
      .shopName {
        margin-bottom: 10px;
      }
    }
    .van-rate {
      margin-right: 16px;
    }
    .handRub {
      margin-top: 4px;
      font-size: 12px;
      color: #949494;
    }
    .bottomText {
      width: 100%;
      div {
        color: #949494;
        width: 30%;
      }
      span {
        margin-bottom: 10px;
      }
      .priceData {
        font-size: 28px;
        color: #1f1f1f;
      }
    }
  }
  // 下面的内容
  .announcement {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    .bulletin {
      line-height: 32px;
      font-size: 20px;
      font-weight: 500;
      color: rgb(234, 80, 40);
    }
    .supports {
      margin-bottom: 10px;
    }
  }
}
</style>
